<template>
  <view
    class="chat-item"
    v-if="item.status !== 'error'"
    :class="{
      assistant: item.role !== globalConfig.userRole,
      user: item.role === globalConfig.userRole,
    }"
  >
    <view
      class="user-avatar"
      :class="{ 'vip-avatar': isVip }"
      v-if="item.role === globalConfig.userRole"
    >
      <image
        @click="toUserCenter(item)"
        v-if="item.role === globalConfig.userRole"
        class="avatar-pic"
        :src="(item.user ? item.user.avatar_url : false) || avatar"
        mode="scaleToFill"
      />
    </view>
    <view class="robot-avatar" v-if="item.role !== globalConfig.userRole">
      <image
        class="robot-avatar-pic"
        @click="roleClick(item)"
        v-if="sysRole.avater || item.avatar || (item.model ? item.model.avatar_url : 'true')"
        :src="
          sysRole.avater ||
          item.avatar ||
          (item.model
            ? item.model.avatar_url
            : 'https://img.js.design/assets/smartFill/img312164da746310.jpg')
        "
        mode="scaleToFill"
      ></image>
      <text v-else class="robot-avatar-text" :style="{ fontSize }">{{ item.role }}</text>
    </view>
    <!-- <view class="robot-avatar" v-if="item.role === globalConfig.systemRole">
      <image
        @click="roleClick(item)"
        class="robot-avatar-pic"
        v-if="sysRole.avater || item.avatar || item.model.avatar_url"
        :src="sysRole.avater || item.avatar || item.model.avatar_url"
        mode="scaleToFill"
      ></image>
      <text v-else class="robot-avatar-text" :style="{ fontSize }">
        {{ name }}
      </text>
    </view> -->
    <view class="msg-box">
      <view
        v-if="item.status === globalStatus.done || !item.status"
        class="fn-box"
        :style="{
          justifyContent: item.role === globalConfig.userRole ? 'flex-end' : 'flex-start',
        }"
      >
        <text
          @click="onReset"
          class="fn-text"
          v-if="item.role === globalConfig.robotRole && item.status !== 'false' && !share"
        >
          重试
        </text>
        <text @click="onCopy" class="fn-text">复制</text>
        <text @click="onDetlete" class="fn-text" v-if="!share">删除</text>
      </view>
      <view
        class="loading-text"
        v-if="item.status === globalStatus.loading || item.status === globalStatus.sending"
        :style="{ textAlign: item.role === globalConfig.userRole ? 'right' : 'left' }"
      >
        <text v-if="item.status === globalStatus.loading">{{ globalConfig.hint.loading }}</text>
        <text v-if="item.status === globalStatus.sending">{{ globalConfig.hint.sending }}</text>
      </view>
      <view class="msg">
        <view style="width: 100%" v-if="item.status !== globalStatus.loading">
          <uni-ai-msg :md="item.content" :showCursor="item.status === 'sending'"></uni-ai-msg>
          <!-- <scroll-view scroll-x :style="{ maxWidth: '520rpx' }">
            <uni-ai-msg :md="item.content" :showCursor="item.status === 'sending'"></uni-ai-msg>
          </scroll-view> -->
        </view>
        <view v-else class="loading-box">
          <u-loading-icon mode="circle" :color="theme.mainColor"></u-loading-icon>
        </view>
      </view>
    </view>
    <roleModal v-model="visible"></roleModal>
  </view>
</template>

<script>
import uniAiMsg from '@/components/uni-ai-msg/uni-ai-msg'
import roleModal from './roleModal.vue'
import { mapState } from 'vuex'
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: 0,
    },
    sysRole: {
      type: Object,
    },
    share: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    uniAiMsg,
    roleModal,
  },
  data() {
    return {
      globalConfig: this.globalConfig,
      globalStatus: this.globalConfig.status,
      visible: false,
    }
  },
  computed: {
    ...mapState({
      theme: (state) => state.config.theme,
    }),
    activeChat() {
      return this.$store.getters.activeChat
    },
    isVip() {
      return this.$store.getters.isVip
    },
    avatar() {
      return this.$store.getters.avatar
    },
    name() {
      if (!this.activeChat.title) return ''
      if (this.activeChat.title.length > 1) {
        return this.activeChat.title.substring(0, 2)
      } else {
        return this.activeChat.title || ''
      }
    },
    fontSize() {
      return this.name.length > 1 ? '32rpx' : '48rpx'
    },
  },
  methods: {
    async onReset() {
      let message = this.$store.state.chatAI.chatListAI[this.index - 1]
      message = JSON.parse(JSON.stringify(message))
      message.time = new Date().getTime()
      this.$store.commit('setSendLoading', true)
      console.log(message)
      // return
      await this.$store.dispatch('IchatMessageAsk', {
        conversation_id: this.$store.state.chatAI.nowItem.id,
        ask_content: message.content,
        tepId: uni.$u.guid(),
      })
      this.$store.commit('setSendLoading', false)
    },
    onCopy() {
      uni.setClipboardData({
        data: this.item.content,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
      })
    },
    onDetlete() {
      this.$store.commit('deleteChatListItem', this.index)
    },
    toUserCenter(item) {
      console.log(item)
      if (this.share) return
      uni.navigateTo({
        url: '/pages/user/user-center/user-center',
      })
    },
    roleClick(item) {
      if (this.share) return
      console.log('item', item)
      this.visible = true

      if (item.id || item.model) {
        this.$store.commit('SETSYSTEMROLE', item)
      }
      // return
    },
  },
}
</script>

<style scoped lang="scss">
.chat-item {
  font-size: 28rpx;
  line-height: 1.5;
  display: flex;
  margin-bottom: 24rpx;
  margin-top: 24rpx;
  .user-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    .avatar-pic {
      width: 90%;
      height: 90%;
      border-radius: 50%;
    }
  }
  .robot-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .robot-avatar-text {
      color: $main-color;
      font-weight: 700;
      transition: all 0.3s ease-in-out;
    }
    .robot-avatar-pic {
      width: 90%;
      height: 90%;
      border-radius: 50%;
    }
  }
  .msg-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .msg {
    padding: 20rpx;
    max-width: 580rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    word-break: break-all;
    font-size: 32rpx;
    margin-top: 12rpx;
  }
  .loading-text {
    font-size: 24rpx;
    color: #999;
  }
  .loading-box {
    padding-left: 10rpx;
  }
}
.assistant {
  flex-direction: row;
  .msg-box {
    margin-left: 16rpx;
    .fn-container {
      height: 33rpx;
    }
  }
  .msg {
    border-radius: 0 20rpx 20rpx 20rpx;
    background: #fff;
    color: #333;
    font-size: 32rpx;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
    max-width: 580rpx;
    box-sizing: border-box;
  }
}
.user {
  flex-direction: row-reverse;
  .msg-box {
    margin-right: 16rpx;
  }
  .msg {
    border-radius: 20rpx 0 20rpx 20rpx;
    background: $main-color;
    color: #fff;
    box-shadow: 0 0 20rpx rgba($main-color, 0.5);
    font-size: 32rpx;
    max-width: 580rpx;
    box-sizing: border-box;
  }
}
.fn-box {
  display: flex;
  justify-content: flex-end;

  color: #333;
  opacity: 0.5;
  font-size: 24rpx;
  .fn-text {
    margin-left: 20rpx;
    font-size: 24rpx;
  }
}
</style>
